<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        品牌<input type="text" v-model="info.val1">
        车系<input type="text" v-model="info.val2">
        年份<input type="text" v-model="info.val3">

        <ul>
            <li v-for="(item , key) in arr" v-show="item.bool" >
                <h1>品牌---{{item.brand}}</h1>
                <p>车型---{{item.series}}---{{item.creation}}</p>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                info:{
                        val1:'',
                        val2:'',
                        val3:'',
                    },
                
                arr:[
                        {
                            brand: "奥迪",
                            series: "奥迪A4",
                            creation: "2021"
                            ,bool:true
                        },
                        {
                            brand: "奥迪",
                            series: "奥迪A6",
                            creation: "2021"
                            ,bool:true
                        },
                        {
                            brand: "奥迪",
                            series: "奥迪A6",
                            creation: "2020"
                            ,bool:true
                        },
                        {
                            brand: "奥迪",
                            series: "奥迪A8",
                            creation: "2020"
                            ,bool:true
                        },
                        {
                            brand: "宝马",
                            series: "宝马7系",
                            creation: "2021"
                            ,bool:true
                        },
                        {
                            brand: "宝马",
                            series: "宝马3系",
                            creation: "2020"
                            ,bool:true
                        },
                        {
                            brand: "宝马",
                            series: "宝马7系",
                            creation: "2020"
                            ,bool:true
                        },
                ]
            },
            methods:{

            },
            watch:{
                info:{
                    deep:true,
                    handler(newValue, oldValue) {
                        console.log(newValue);
                        this.arr.forEach(function(item , key){
                            //val1
                            if(item.brand === newValue.val1){
                                
                                item.bool = true
                                //val2
                                if(item.series === newValue.val2){
                                
                                        item.bool = true
                                        //val3
                                        if(item.creation === newValue.val3){
                                
                                            item.bool = true
                                
                                        }else if(newValue.val3 === ''){
                                            item.bool = true
                                        }else{
                                            item.bool = false
                                        }
                                    }else if(newValue.val2 === ''){
                                        item.bool = true
                                    }else{
                                        item.bool = false
                                    }

                            }else if(newValue.val1 === ''){
                                item.bool = true
                                if(item.series === newValue.val2){
                                
                                item.bool = true
                                //val3
                                if(item.creation === newValue.val3){
                        
                                    item.bool = true
                        
                                }else if(newValue.val3 === ''){
                                    item.bool = true
                                }else{
                                    item.bool = false
                                }
                            }else if(newValue.val2 === ''){
                                item.bool = true
                                if(item.creation === newValue.val3){
                        
                                    item.bool = true
            
                                }else if(newValue.val3 === ''){
                                    item.bool = true
                                }else{
                                    item.bool = false
                                }
                            }else{
                                item.bool = false
                            }
                            }else{

                                item.bool = false
                            }



                            // if(item.series === newValue.val2){
                                
                            //     item.bool = true
                            // }else{
                            //     item.bool = false
                            // }


                            
                            // if(item.creation === newValue.val3){
                                
                            //     item.bool = true
                            // }else{
                            //     item.bool = false
                            // }
                        })
                     
                        // this.arr.filter(res=>{
                        //     res.brand === val1
                        // })
                    }
                }
            }
        })
    </script>
</body>
</html>